<!DOCTYPE html>
<html lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">

    <!--[if lt IE 9]>
        <style>body {display: none; background: none !important} </style>
        <meta http-equiv="Refresh" Content="0; url=//outdatedbrowser.com/" />
    <![endif]-->

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="author" content="yuefu">



<meta name="keywords" content="linux,ubuntu,centos,mail">
<meta property="og:type" content="article">
<meta property="og:title" content="开源在线-Markdown-编辑器">
<meta property="og:url" content="https://yueandli.github.io/2019/01/08/开源在线-Markdown-编辑器/index.html">
<meta property="og:site_name" content="blog">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://pandao.github.io/editor.md/examples/images/7.jpg">
<meta property="og:image" content="https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png">
<meta property="og:image" content="https://img.shields.io/github/stars/pandao/editor.md.svg">
<meta property="og:image" content="https://img.shields.io/github/forks/pandao/editor.md.svg">
<meta property="og:image" content="https://img.shields.io/github/tag/pandao/editor.md.svg">
<meta property="og:image" content="https://img.shields.io/github/release/pandao/editor.md.svg">
<meta property="og:image" content="https://img.shields.io/github/issues/pandao/editor.md.svg">
<meta property="og:image" content="https://img.shields.io/bower/v/editor.md.svg">
<meta property="og:image" content="https://pandao.github.io/editor.md/examples/images/4.jpg">
<meta property="og:image" content="https://pandao.github.io/editor.md/examples/images/8.jpg">
<meta property="og:image" content="https://pandao.github.io/editor.md/examples/images/7.jpg">
<meta property="og:updated_time" content="2019-01-10T02:02:50.181Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="开源在线-Markdown-编辑器">
<meta name="twitter:image" content="https://pandao.github.io/editor.md/examples/images/7.jpg">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">


    <link rel="alternate" href="/atom.xml" title="blog" type="application/atom+xml">



    <link rel="shortcut icon" href="/img/blog.png">



    <link href="//cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">



    <link href="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet">



    <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
    <link href="//cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-minimal.css" rel="stylesheet">


<link rel="stylesheet" href="/css/style.css">



<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">


<title>开源在线-Markdown-编辑器 | blog</title>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<script>
    var yiliaConfig = {
        fancybox: true,
        animate: true,
        isHome: false,
        isPost: true,
        isArchive: false,
        isTag: false,
        isCategory: false,
        fancybox_js: "//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js",
        scrollreveal: "//cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js",
        search: true
    }
</script>


    <script>
        yiliaConfig.jquery_ui = [true, "//cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js", "//cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css"];
    </script>



    <script> yiliaConfig.rootUrl = "\/";</script>






</head></html>
<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
    <header id="header" class="inner">
        <a href="/" class="profilepic">
            <img src="/img/avatar.png" class="animated zoomIn">
        </a>
        <hgroup>
          <h1 class="header-author"><a href="/">yuefu</a></h1>
        </hgroup>

        
        <p class="header-subtitle">分享技术，品味人生</p>
        

        
            <form id="search-form">
            <input type="text" id="local-search-input" name="q" placeholder="search..." class="search form-control" autocomplete="off" autocorrect="off" searchonload="false">
            <i class="fa fa-times" onclick="resetSearch()"></i>
            </form>
            <div id="local-search-result"></div>
            <p class="no-result">No results found <i class="fa fa-spinner fa-pulse"></i></p>
        


        
            <div id="switch-btn" class="switch-btn">
                <div class="icon">
                    <div class="icon-ctn">
                        <div class="icon-wrap icon-house" data-idx="0">
                            <div class="birdhouse"></div>
                            <div class="birdhouse_holes"></div>
                        </div>
                        <div class="icon-wrap icon-ribbon hide" data-idx="1">
                            <div class="ribbon"></div>
                        </div>
                        
                        <div class="icon-wrap icon-link hide" data-idx="2">
                            <div class="loopback_l"></div>
                            <div class="loopback_r"></div>
                        </div>
                        
                        
                        <div class="icon-wrap icon-me hide" data-idx="3">
                            <div class="user"></div>
                            <div class="shoulder"></div>
                        </div>
                        
                    </div>
                    
                </div>
                <div class="tips-box hide">
                    <div class="tips-arrow"></div>
                    <ul class="tips-inner">
                        <li>菜单</li>
                        <li>标签</li>
                        
                        <li>友情链接</li>
                        
                        
                        <li>关于我</li>
                        
                    </ul>
                </div>
            </div>
        

        <div id="switch-area" class="switch-area">
            <div class="switch-wrap">
                <section class="switch-part switch-part1">
                    <nav class="header-menu">
                        <ul>
                        
                            <li><a href="/">主页</a></li>
                        
                            <li><a href="/archives/">所有文章</a></li>
                        
                            <li><a href="/tags/">标签</a></li>
                        
                            <li><a href="/photos/">相册</a></li>
                        
                        </ul>
                    </nav>
                    <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fa Email" href="/444677839@qq.com" title="Email"></a>
                            
                                <a class="fa 新浪微博" href="/sina weibo" title="新浪微博"></a>
                            
                                <a class="fa GitHub" href="https://github.com/YueAndLi/" title="GitHub"></a>
                            
                                <a class="fa 简书" href="/jianshu" title="简书"></a>
                            
                                <a class="fa CSDN" href="#" title="CSDN"></a>
                            
                                <a class="fa QQ" href="#" title="QQ"></a>
                            
                        </ul>
                    </nav>
                </section>
                
                
                <section class="switch-part switch-part2">
                    <div class="widget tagcloud" id="js-tagcloud">
                        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/centos/">centos</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/linux/">linux</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mail/">mail</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ubuntu/">ubuntu</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/其他/">其他</a></li></ul>
                    </div>
                </section>
                
                
                
                <section class="switch-part switch-part3">
                    <div id="js-friends">
                    
                      <a class="main-nav-link switch-friends-link" href="https://hexo.io">Hexo</a>
                    
                      <a class="main-nav-link switch-friends-link" href="https://pages.github.com/">GitHub</a>
                    
                      <a class="main-nav-link switch-friends-link" href="http://moxfive.xyz/">MOxFIVE</a>
                    
                    </div>
                </section>
                

                
                
                <section class="switch-part switch-part4">
                
                    <div id="js-aboutme">专注于前端</div>
                </section>
                
            </div>
        </div>
    </header>                
</div>
    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="回到主页">yuefu</a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                <img src="/img/avatar.png" class="animated zoomIn">
            </a>
            <hgroup>
              <h1 class="header-author"><a href="/" title="回到主页">yuefu</a></h1>
            </hgroup>
            
            <p class="header-subtitle">分享技术，品味人生</p>
            
            <nav class="header-menu">
                <ul>
                
                    <li><a href="/">主页</a></li>
                
                    <li><a href="/archives/">所有文章</a></li>
                
                    <li><a href="/tags/">标签</a></li>
                
                    <li><a href="/photos/">相册</a></li>
                
                <div class="clearfix"></div>
                </ul>
            </nav>
            <nav class="header-nav">
                        <ul class="social">
                            
                                <a class="fa Email" target="_blank" href="/444677839@qq.com" title="Email"></a>
                            
                                <a class="fa 新浪微博" target="_blank" href="/sina weibo" title="新浪微博"></a>
                            
                                <a class="fa GitHub" target="_blank" href="https://github.com/YueAndLi/" title="GitHub"></a>
                            
                                <a class="fa 简书" target="_blank" href="/jianshu" title="简书"></a>
                            
                                <a class="fa CSDN" target="_blank" href="#" title="CSDN"></a>
                            
                                <a class="fa QQ" target="_blank" href="#" title="QQ"></a>
                            
                        </ul>
            </nav>
        </header>                
    </div>
    <link class="menu-list" tags="标签" friends="友情链接" about="关于我">
</nav>
      <div class="body-wrap"><article id="post-开源在线-Markdown-编辑器" class="article article-type-post" itemscope="" itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2019/01/08/开源在线-Markdown-编辑器/" class="article-date">
      <time datetime="2019-01-08T08:26:19.000Z" itemprop="datePublished">2019-01-08</time>
</a>


    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      开源在线-Markdown-编辑器
    </h1>
  

        
		  <div style="margin-top:10px;margin-bottom:30px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字数统计: </span>
        <span class="post-count">1.3k字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  阅读时长: </span>
        <span class="post-count">6分</span>
      </span>
    </span>
</div>
        
      </header>
      
      <div class="article-info article-info-post">
        
    <div class="article-category tagcloud">
    <a class="article-category-link" href="/categories/markdown语法/">markdown语法</a><a class="article-category-link" href="/categories/markdown语法/专业/">专业</a>
    </div>


        
    <div class="article-tag tagcloud">
        <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/centos/">centos</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/linux/">linux</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/mail/">mail</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ubuntu/">ubuntu</a></li></ul>
    </div>

        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <p><excerpt in="" index="" |="" 首页摘要=""><br><a href="https://pandao.github.io/editor.md/examples/images/7.jpg" title="李健首张专辑《似水流年》封面" target="_blank" rel="noopener"><img src="https://pandao.github.io/editor.md/examples/images/7.jpg" alt=""></a><br><a id="more"></a></excerpt></p>
<the rest="" of="" contents="" |="" 余下全文="">



<h3 id="主要特性"><a href="#主要特性" class="headerlink" title="主要特性"></a>主要特性</h3><ul>
<li>支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器；</li>
<li>支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；</li>
<li>支持ToC（Table of Contents）、Emoji表情、Task lists、@链接等Markdown扩展语法；</li>
<li>支持TeX科学公式（基于KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;</li>
<li>支持识别和解析HTML标签，并且支持自定义过滤标签解析，具有可靠的安全性和几乎无限的扩展性；</li>
<li>支持 AMD / CMD 模块化加载（支持 Require.js &amp; Sea.js），并且支持自定义扩展插件；</li>
<li>兼容主流的浏览器（IE8+）和Zepto.js，且支持iPad等平板设备；</li>
<li>支持自定义主题样式；</li>
</ul>
<h1 id="Editor-md"><a href="#Editor-md" class="headerlink" title="Editor.md"></a>Editor.md</h1><p><img src="https://pandao.github.io/editor.md/images/logos/editormd-logo-180x180.png" alt=""></p>
<p><img src="https://img.shields.io/github/stars/pandao/editor.md.svg" alt=""> <img src="https://img.shields.io/github/forks/pandao/editor.md.svg" alt=""> <img src="https://img.shields.io/github/tag/pandao/editor.md.svg" alt=""> <img src="https://img.shields.io/github/release/pandao/editor.md.svg" alt=""> <img src="https://img.shields.io/github/issues/pandao/editor.md.svg" alt=""> <img src="https://img.shields.io/bower/v/editor.md.svg" alt=""></p>
<p><strong>目录 (Table of Contents)</strong></p>
<p>[TOCM]</p>
<p>[TOC]</p>
<h1 id="Heading-1"><a href="#Heading-1" class="headerlink" title="Heading 1"></a>Heading 1</h1><h2 id="Heading-2"><a href="#Heading-2" class="headerlink" title="Heading 2"></a>Heading 2</h2><h3 id="Heading-3"><a href="#Heading-3" class="headerlink" title="Heading 3"></a>Heading 3</h3><h4 id="Heading-4"><a href="#Heading-4" class="headerlink" title="Heading 4"></a>Heading 4</h4><h5 id="Heading-5"><a href="#Heading-5" class="headerlink" title="Heading 5"></a>Heading 5</h5><h6 id="Heading-6"><a href="#Heading-6" class="headerlink" title="Heading 6"></a>Heading 6</h6><h1 id="Heading-1-link-Heading-link"><a href="#Heading-1-link-Heading-link" class="headerlink" title="Heading 1 link Heading link"></a>Heading 1 link <a href="https://github.com/pandao/editor.md" title="Heading link" target="_blank" rel="noopener">Heading link</a></h1><h2 id="Heading-2-link-Heading-link"><a href="#Heading-2-link-Heading-link" class="headerlink" title="Heading 2 link Heading link"></a>Heading 2 link <a href="https://github.com/pandao/editor.md" title="Heading link" target="_blank" rel="noopener">Heading link</a></h2><h3 id="Heading-3-link-Heading-link"><a href="#Heading-3-link-Heading-link" class="headerlink" title="Heading 3 link Heading link"></a>Heading 3 link <a href="https://github.com/pandao/editor.md" title="Heading link" target="_blank" rel="noopener">Heading link</a></h3><h4 id="Heading-4-link-Heading-link-Heading-link-Heading-link"><a href="#Heading-4-link-Heading-link-Heading-link-Heading-link" class="headerlink" title="Heading 4 link Heading link Heading link Heading link"></a>Heading 4 link <a href="https://github.com/pandao/editor.md" title="Heading link" target="_blank" rel="noopener">Heading link</a> Heading link <a href="https://github.com/pandao/editor.md" title="Heading link" target="_blank" rel="noopener">Heading link</a></h4><h5 id="Heading-5-link-Heading-link"><a href="#Heading-5-link-Heading-link" class="headerlink" title="Heading 5 link Heading link"></a>Heading 5 link <a href="https://github.com/pandao/editor.md" title="Heading link" target="_blank" rel="noopener">Heading link</a></h5><h6 id="Heading-6-link-Heading-link"><a href="#Heading-6-link-Heading-link" class="headerlink" title="Heading 6 link Heading link"></a>Heading 6 link <a href="https://github.com/pandao/editor.md" title="Heading link" target="_blank" rel="noopener">Heading link</a></h6><h4 id="标题（用底线的形式）Heading-underline"><a href="#标题（用底线的形式）Heading-underline" class="headerlink" title="标题（用底线的形式）Heading (underline)"></a>标题（用底线的形式）Heading (underline)</h4><h1 id="This-is-an-H1"><a href="#This-is-an-H1" class="headerlink" title="This is an H1"></a>This is an H1</h1><h2 id="This-is-an-H2"><a href="#This-is-an-H2" class="headerlink" title="This is an H2"></a>This is an H2</h2><h3 id="字符效果和横线等"><a href="#字符效果和横线等" class="headerlink" title="字符效果和横线等"></a>字符效果和横线等</h3><hr>
<p><del>删除线</del> <s>删除线（开启识别HTML标签时）</s><br><em>斜体字</em>      <em>斜体字</em><br><strong>粗体</strong>  <strong>粗体</strong><br><strong><em>粗斜体</em></strong> <strong><em>粗斜体</em></strong></p>
<p>上标：X<sub>2</sub>，下标：O<sup>2</sup></p>
<p><strong>缩写(同HTML的abbr标签)</strong></p>
<blockquote>
<p>即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启</p>
</blockquote>
<p>The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
<h3 id="引用-Blockquotes"><a href="#引用-Blockquotes" class="headerlink" title="引用 Blockquotes"></a>引用 Blockquotes</h3><blockquote>
<p>引用文本 Blockquotes</p>
</blockquote>
<p>引用的行内混合 Blockquotes</p>
<blockquote>
<p>引用：如果想要插入空白换行<code>即&lt;br /&gt;标签</code>，在插入处先键入两个以上的空格然后回车即可，<a href="http://localhost/" target="_blank" rel="noopener">普通链接</a>。</p>
</blockquote>
<h3 id="锚点与链接-Links"><a href="#锚点与链接-Links" class="headerlink" title="锚点与链接 Links"></a>锚点与链接 Links</h3><p><a href="http://localhost/" target="_blank" rel="noopener">普通链接</a></p>
<p><a href="http://localhost/" title="普通链接带标题" target="_blank" rel="noopener">普通链接带标题</a></p>
<p>直接链接：<a href="https://github.com" target="_blank" rel="noopener">https://github.com</a></p>
<p><a href="http://www.this-anchor-link.com/" target="_blank" rel="noopener">锚点链接</a> </p>
<p>GFM a-tail link @pandao</p>
<blockquote>
<p>@pandao</p>
</blockquote>
<h3 id="多语言代码高亮-Codes"><a href="#多语言代码高亮-Codes" class="headerlink" title="多语言代码高亮 Codes"></a>多语言代码高亮 Codes</h3><h4 id="行内代码-Inline-code"><a href="#行内代码-Inline-code" class="headerlink" title="行内代码 Inline code"></a>行内代码 Inline code</h4><p>执行命令：<code>npm install marked</code></p>
<h4 id="缩进风格"><a href="#缩进风格" class="headerlink" title="缩进风格"></a>缩进风格</h4><p>即缩进四个空格，也做为实现类似<code>&lt;pre&gt;</code>预格式化文本(Preformatted Text)的功能。</p>
<pre><code>&lt;?php
    echo &quot;Hello world!&quot;;
?&gt;
</code></pre><p>预格式化文本：</p>
<pre><code>| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
</code></pre><h4 id="JS代码"><a href="#JS代码" class="headerlink" title="JS代码　"></a>JS代码　</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(<span class="string">"Hello world!"</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> box = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> box.fn.init();</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    box.prototype = box.fn = &#123;</span><br><span class="line">        init : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'box.init()'</span>);</span><br><span class="line"></span><br><span class="line">			<span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">		add : <span class="function"><span class="keyword">function</span>(<span class="params">str</span>)</span>&#123;</span><br><span class="line">			alert(<span class="string">"add"</span>, str);</span><br><span class="line"></span><br><span class="line">			<span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">		&#125;,</span><br><span class="line"></span><br><span class="line">		remove : <span class="function"><span class="keyword">function</span>(<span class="params">str</span>)</span>&#123;</span><br><span class="line">			alert(<span class="string">"remove"</span>, str);</span><br><span class="line"></span><br><span class="line">			<span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">		&#125;</span><br><span class="line">    &#125;;</span><br><span class="line">    </span><br><span class="line">    box.fn.init.prototype = box.fn;</span><br><span class="line">    </span><br><span class="line">    <span class="built_in">window</span>.box =box;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> testBox = box();</span><br><span class="line">testBox.add(<span class="string">"jQuery"</span>).remove(<span class="string">"jQuery"</span>);</span><br></pre></td></tr></table></figure>
<h4 id="HTML代码-HTML-codes"><a href="#HTML代码-HTML-codes" class="headerlink" title="HTML代码 HTML codes"></a>HTML代码 HTML codes</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">mate</span> <span class="attr">charest</span>=<span class="string">"utf-8"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">title</span>&gt;</span>Hello world!<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello world!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="图片-Images"><a href="#图片-Images" class="headerlink" title="图片 Images"></a>图片 Images</h3><p>Image:</p>
<p><img src="https://pandao.github.io/editor.md/examples/images/4.jpg" alt=""></p>
<blockquote>
<p>Follow your heart.</p>
</blockquote>
<p><img src="https://pandao.github.io/editor.md/examples/images/8.jpg" alt=""></p>
<blockquote>
<p>图为：厦门白城沙滩</p>
</blockquote>
<p>图片加链接 (Image + Link)：</p>
<p><a href="https://pandao.github.io/editor.md/examples/images/7.jpg" title="李健首张专辑《似水流年》封面" target="_blank" rel="noopener"><img src="https://pandao.github.io/editor.md/examples/images/7.jpg" alt=""></a></p>
<blockquote>
<p>图为：李健首张专辑《似水流年》封面</p>
</blockquote>
<hr>
<h3 id="列表-Lists"><a href="#列表-Lists" class="headerlink" title="列表 Lists"></a>列表 Lists</h3><h4 id="无序列表（减号）Unordered-Lists"><a href="#无序列表（减号）Unordered-Lists" class="headerlink" title="无序列表（减号）Unordered Lists (-)"></a>无序列表（减号）Unordered Lists (-)</h4><ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<h4 id="无序列表（星号）Unordered-Lists"><a href="#无序列表（星号）Unordered-Lists" class="headerlink" title="无序列表（星号）Unordered Lists (*)"></a>无序列表（星号）Unordered Lists (*)</h4><ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<h4 id="无序列表（加号和嵌套）Unordered-Lists"><a href="#无序列表（加号和嵌套）Unordered-Lists" class="headerlink" title="无序列表（加号和嵌套）Unordered Lists (+)"></a>无序列表（加号和嵌套）Unordered Lists (+)</h4><ul>
<li>列表一</li>
<li>列表二<ul>
<li>列表二-1</li>
<li>列表二-2</li>
<li>列表二-3</li>
</ul>
</li>
<li>列表三<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</li>
</ul>
<h4 id="有序列表-Ordered-Lists"><a href="#有序列表-Ordered-Lists" class="headerlink" title="有序列表 Ordered Lists (-)"></a>有序列表 Ordered Lists (-)</h4><ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
<h4 id="GFM-task-list"><a href="#GFM-task-list" class="headerlink" title="GFM task list"></a>GFM task list</h4><ul>
<li style="list-style: none"><input type="checkbox" checked> GFM task list 1</li>
<li style="list-style: none"><input type="checkbox" checked> GFM task list 2</li>
<li style="list-style: none"><input type="checkbox"> GFM task list 3<ul>
<li style="list-style: none"><input type="checkbox"> GFM task list 3-1</li>
<li style="list-style: none"><input type="checkbox"> GFM task list 3-2</li>
<li style="list-style: none"><input type="checkbox"> GFM task list 3-3</li>
</ul>
</li>
<li style="list-style: none"><input type="checkbox"> GFM task list 4<ul>
<li style="list-style: none"><input type="checkbox"> GFM task list 4-1</li>
<li style="list-style: none"><input type="checkbox"> GFM task list 4-2</li>
</ul>
</li>
</ul>
<hr>
<h3 id="绘制表格-Tables"><a href="#绘制表格-Tables" class="headerlink" title="绘制表格 Tables"></a>绘制表格 Tables</h3><table>
<thead>
<tr>
<th>项目</th>
<th style="text-align:right">价格</th>
<th style="text-align:center">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>计算机</td>
<td style="text-align:right">$1600</td>
<td style="text-align:center">5</td>
</tr>
<tr>
<td>手机</td>
<td style="text-align:right">$12</td>
<td style="text-align:center">12</td>
</tr>
<tr>
<td>管线</td>
<td style="text-align:right">$1</td>
<td style="text-align:center">234</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>First Header</th>
<th>Second Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
<tr>
<td>Content Cell</td>
<td>Content Cell </td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>First Header</th>
<th>Second Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
<tr>
<td>Content Cell</td>
<td>Content Cell</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Function name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>help()</code></td>
<td>Display the help window.</td>
</tr>
<tr>
<td><code>destroy()</code></td>
<td><strong>Destroy your computer!</strong></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th style="text-align:left">Left-Aligned</th>
<th style="text-align:center">Center Aligned</th>
<th style="text-align:right">Right Aligned</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">col 3 is</td>
<td style="text-align:center">some wordy text</td>
<td style="text-align:right">$1600</td>
</tr>
<tr>
<td style="text-align:left">col 2 is</td>
<td style="text-align:center">centered</td>
<td style="text-align:right">$12</td>
</tr>
<tr>
<td style="text-align:left">zebra stripes</td>
<td style="text-align:center">are neat</td>
<td style="text-align:right">$1</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Item</th>
<th style="text-align:right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer</td>
<td style="text-align:right">$1600</td>
</tr>
<tr>
<td>Phone</td>
<td style="text-align:right">$12</td>
</tr>
<tr>
<td>Pipe</td>
<td style="text-align:right">$1</td>
</tr>
</tbody>
</table>
<hr>
<h4 id="特殊符号-HTML-Entities-Codes"><a href="#特殊符号-HTML-Entities-Codes" class="headerlink" title="特殊符号 HTML Entities Codes"></a>特殊符号 HTML Entities Codes</h4><p>&copy; &amp;  &uml; &trade; &iexcl; &pound;<br>&amp; &lt; &gt; &yen; &euro; &reg; &plusmn; &para; &sect; &brvbar; &macr; &laquo; &middot; </p>
<p>X&sup2; Y&sup3; &frac34; &frac14;  &times;  &divide;   &raquo;</p>
<p>18&ordm;C  &quot;  &apos;</p>
<h3 id="Emoji表情-smiley"><a href="#Emoji表情-smiley" class="headerlink" title="Emoji表情 :smiley:"></a>Emoji表情 :smiley:</h3><blockquote>
<p>Blockquotes :star:</p>
</blockquote>
<h4 id="GFM-task-lists-amp-Emoji-amp-fontAwesome-icon-emoji-amp-editormd-logo-emoji-editormd-logo-5x"><a href="#GFM-task-lists-amp-Emoji-amp-fontAwesome-icon-emoji-amp-editormd-logo-emoji-editormd-logo-5x" class="headerlink" title="GFM task lists &amp; Emoji &amp; fontAwesome icon emoji &amp; editormd logo emoji :editormd-logo-5x:"></a>GFM task lists &amp; Emoji &amp; fontAwesome icon emoji &amp; editormd logo emoji :editormd-logo-5x:</h4><ul>
<li style="list-style: none"><input type="checkbox" checked> :smiley: @mentions, :smiley: #refs, <a href="">links</a>, <strong>formatting</strong>, and <del>tags</del> supported :editormd-logo:;</li>
<li style="list-style: none"><input type="checkbox" checked> list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;</li>
<li style="list-style: none"><input type="checkbox" checked> [ ] :smiley: this is a complete item :smiley:;</li>
<li style="list-style: none"><input type="checkbox"> []this is an incomplete item <a href="#">test link</a> :fa-star: @pandao; </li>
<li style="list-style: none"><input type="checkbox"> [ ]this is an incomplete item :fa-star: :fa-gear:;<ul>
<li style="list-style: none"><input type="checkbox"> :smiley: this is an incomplete item <a href="#">test link</a> :fa-star: :fa-gear:;</li>
<li style="list-style: none"><input type="checkbox"> :smiley: this is  :fa-star: :fa-gear: an incomplete item <a href="#">test link</a>;</li>
</ul>
</li>
</ul>
<h4 id="反斜杠-Escape"><a href="#反斜杠-Escape" class="headerlink" title="反斜杠 Escape"></a>反斜杠 Escape</h4><p>*literal asterisks*</p>
<h3 id="科学公式-TeX-KaTeX"><a href="#科学公式-TeX-KaTeX" class="headerlink" title="科学公式 TeX(KaTeX)"></a>科学公式 TeX(KaTeX)</h3><p>$$E=mc^2$$</p>
<p>行内的公式$$E=mc^2$$行内的公式，行内的$$E=mc^2$$公式。</p>
<p>$$(\sqrt{3x-1}+(1+x)^2)$$</p>
<p>$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$</p>
<p>多行公式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">\displaystyle</span><br><span class="line">\left( \sum\_&#123;k=1&#125;^n a\_k b\_k \right)^2</span><br><span class="line">\leq</span><br><span class="line">\left( \sum\_&#123;k=1&#125;^n a\_k^2 \right)</span><br><span class="line">\left( \sum\_&#123;k=1&#125;^n b\_k^2 \right)</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">\displaystyle </span><br><span class="line">    \frac&#123;1&#125;&#123;</span><br><span class="line">        \Bigl(\sqrt&#123;\phi \sqrt&#123;5&#125;&#125;-\phi\Bigr) e^&#123;</span><br><span class="line">        \frac25 \pi&#125;&#125; = 1+\frac&#123;e^&#123;-2\pi&#125;&#125; &#123;1+\frac&#123;e^&#123;-4\pi&#125;&#125; &#123;</span><br><span class="line">        1+\frac&#123;e^&#123;-6\pi&#125;&#125;</span><br><span class="line">        &#123;1+\frac&#123;e^&#123;-8\pi&#125;&#125;</span><br><span class="line">         &#123;1+\cdots&#125; &#125;</span><br><span class="line">        &#125; </span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">f(x) = \int_&#123;-\infty&#125;^\infty</span><br><span class="line">    \hat f(\xi)\,e^&#123;2 \pi i \xi x&#125;</span><br><span class="line">    \,d\xi</span><br></pre></td></tr></table></figure>
<h3 id="绘制流程图-Flowchart"><a href="#绘制流程图-Flowchart" class="headerlink" title="绘制流程图 Flowchart"></a>绘制流程图 Flowchart</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">st=&gt;start: 用户登陆</span><br><span class="line">op=&gt;operation: 登陆操作</span><br><span class="line">cond=&gt;condition: 登陆成功 Yes or No?</span><br><span class="line">e=&gt;end: 进入后台</span><br><span class="line"></span><br><span class="line">st-&gt;op-&gt;cond</span><br><span class="line">cond(yes)-&gt;e</span><br><span class="line">cond(no)-&gt;op</span><br></pre></td></tr></table></figure>
<h3 id="绘制序列图-Sequence-Diagram"><a href="#绘制序列图-Sequence-Diagram" class="headerlink" title="绘制序列图 Sequence Diagram"></a>绘制序列图 Sequence Diagram</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Andrew-&gt;China: Says Hello </span><br><span class="line">Note right of China: China thinks\nabout it </span><br><span class="line">China--&gt;Andrew: How are you? </span><br><span class="line">Andrew-&gt;&gt;China: I am good thanks!</span><br></pre></td></tr></table></figure>
<h3 id="End"><a href="#End" class="headerlink" title="End"></a>End</h3></the>
      
    </div>
    
  </div>
  
    
    <div class="copyright">
        <p><span>本文标题:</span><a href="/2019/01/08/开源在线-Markdown-编辑器/">开源在线-Markdown-编辑器</a></p>
        <p><span>文章作者:</span><a href="/" title="回到主页">yuefu</a></p>
        <p><span>发布时间:</span>2019-01-08, 16:26:19</p>
        <p><span>最后更新:</span>2019-01-10, 10:02:50</p>
        <p>
            <span>原始链接:</span><a class="post-url" href="/2019/01/08/开源在线-Markdown-编辑器/" title="开源在线-Markdown-编辑器">https://yueandli.github.io/2019/01/08/开源在线-Markdown-编辑器/</a>
            <span class="copy-path" data-clipboard-text="原文: https://yueandli.github.io/2019/01/08/开源在线-Markdown-编辑器/　　作者: yuefu" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
            <script> var clipboard = new Clipboard('.copy-path'); </script>
        </p>
        <p>
            <span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="CC BY-NC-SA 4.0 International" target="_blank">"署名-非商用-相同方式共享 4.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>



    <nav id="article-nav">
        
            <div id="article-nav-newer" class="article-nav-title">
                <a href="/2019/01/11/firstblog/">
                    firstblog
                </a>
            </div>
        
        
            <div id="article-nav-older" class="article-nav-title">
                <a href="/2019/01/07/hello-hexo/">
                    hello hexo
                </a>
            </div>
        
    </nav>

  
</article>

    <div id="toc" class="toc-article">
        <strong class="toc-title">文章目录</strong>
        
            <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#主要特性"><span class="toc-number">1.</span> <span class="toc-text">主要特性</span></a></li></ol><li class="toc-item toc-level-1"><a class="toc-link" href="#Editor-md"><span class="toc-number"></span> <span class="toc-text">Editor.md</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Heading-1"><span class="toc-number"></span> <span class="toc-text">Heading 1</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Heading-2"><span class="toc-number"></span> <span class="toc-text">Heading 2</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Heading-3"><span class="toc-number">1.</span> <span class="toc-text">Heading 3</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Heading-4"><span class="toc-number">1.1.</span> <span class="toc-text">Heading 4</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#Heading-5"><span class="toc-number">1.1.1.</span> <span class="toc-text">Heading 5</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#Heading-6"><span class="toc-number">1.1.1.1.</span> <span class="toc-text">Heading 6</span></a></li></ol></li></ol></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Heading-1-link-Heading-link"><span class="toc-number"></span> <span class="toc-text">Heading 1 link Heading link</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Heading-2-link-Heading-link"><span class="toc-number"></span> <span class="toc-text">Heading 2 link Heading link</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Heading-3-link-Heading-link"><span class="toc-number">1.</span> <span class="toc-text">Heading 3 link Heading link</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Heading-4-link-Heading-link-Heading-link-Heading-link"><span class="toc-number">1.1.</span> <span class="toc-text">Heading 4 link Heading link Heading link Heading link</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#Heading-5-link-Heading-link"><span class="toc-number">1.1.1.</span> <span class="toc-text">Heading 5 link Heading link</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#Heading-6-link-Heading-link"><span class="toc-number">1.1.1.1.</span> <span class="toc-text">Heading 6 link Heading link</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#标题（用底线的形式）Heading-underline"><span class="toc-number">1.2.</span> <span class="toc-text">标题（用底线的形式）Heading (underline)</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#This-is-an-H1"><span class="toc-number"></span> <span class="toc-text">This is an H1</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#This-is-an-H2"><span class="toc-number"></span> <span class="toc-text">This is an H2</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#字符效果和横线等"><span class="toc-number">1.</span> <span class="toc-text">字符效果和横线等</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#引用-Blockquotes"><span class="toc-number">2.</span> <span class="toc-text">引用 Blockquotes</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#锚点与链接-Links"><span class="toc-number">3.</span> <span class="toc-text">锚点与链接 Links</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#多语言代码高亮-Codes"><span class="toc-number">4.</span> <span class="toc-text">多语言代码高亮 Codes</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#行内代码-Inline-code"><span class="toc-number">4.1.</span> <span class="toc-text">行内代码 Inline code</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#缩进风格"><span class="toc-number">4.2.</span> <span class="toc-text">缩进风格</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#JS代码"><span class="toc-number">4.3.</span> <span class="toc-text">JS代码　</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#HTML代码-HTML-codes"><span class="toc-number">4.4.</span> <span class="toc-text">HTML代码 HTML codes</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#图片-Images"><span class="toc-number">5.</span> <span class="toc-text">图片 Images</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#列表-Lists"><span class="toc-number">6.</span> <span class="toc-text">列表 Lists</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#无序列表（减号）Unordered-Lists"><span class="toc-number">6.1.</span> <span class="toc-text">无序列表（减号）Unordered Lists (-)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#无序列表（星号）Unordered-Lists"><span class="toc-number">6.2.</span> <span class="toc-text">无序列表（星号）Unordered Lists (*)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#无序列表（加号和嵌套）Unordered-Lists"><span class="toc-number">6.3.</span> <span class="toc-text">无序列表（加号和嵌套）Unordered Lists (+)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#有序列表-Ordered-Lists"><span class="toc-number">6.4.</span> <span class="toc-text">有序列表 Ordered Lists (-)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#GFM-task-list"><span class="toc-number">6.5.</span> <span class="toc-text">GFM task list</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#绘制表格-Tables"><span class="toc-number">7.</span> <span class="toc-text">绘制表格 Tables</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#特殊符号-HTML-Entities-Codes"><span class="toc-number">7.1.</span> <span class="toc-text">特殊符号 HTML Entities Codes</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Emoji表情-smiley"><span class="toc-number">8.</span> <span class="toc-text">Emoji表情 :smiley:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#GFM-task-lists-amp-Emoji-amp-fontAwesome-icon-emoji-amp-editormd-logo-emoji-editormd-logo-5x"><span class="toc-number">8.1.</span> <span class="toc-text">GFM task lists &amp; Emoji &amp; fontAwesome icon emoji &amp; editormd logo emoji :editormd-logo-5x:</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#反斜杠-Escape"><span class="toc-number">8.2.</span> <span class="toc-text">反斜杠 Escape</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#科学公式-TeX-KaTeX"><span class="toc-number">9.</span> <span class="toc-text">科学公式 TeX(KaTeX)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#绘制流程图-Flowchart"><span class="toc-number">10.</span> <span class="toc-text">绘制流程图 Flowchart</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#绘制序列图-Sequence-Diagram"><span class="toc-number">11.</span> <span class="toc-text">绘制序列图 Sequence Diagram</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#End"><span class="toc-number">12.</span> <span class="toc-text">End</span></a></li></ol>
        
    </li></ol></li></div>
    <style>
        .left-col .switch-btn,
        .left-col .switch-area {
            display: none;
        }
        .toc-level-3 i,
        .toc-level-3 ol {
            display: none !important;
        }
    </style>

    <input type="button" id="tocButton" value="隐藏目录" title="点击按钮隐藏或者显示文章目录">

    <script>
        yiliaConfig.toc = ["隐藏目录", "显示目录", !!"false"];
    </script>



    
<div class="share">
    
        <div class="bdsharebuttonbox">
            <a href="#" class="fa fa-twitter bds_twi" data-cmd="twi" title="分享到推特"></a>
            <a href="#" class="fa fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
            <a href="#" class="fa fa-qq bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
            <a href="#" class="fa fa-files-o bds_copy" data-cmd="copy" title="复制网址"></a>
            <a href="#" class="fa fa fa-envelope-o bds_mail" data-cmd="mail" title="通过邮件分享"></a>
            <a href="#" class="fa fa-weixin bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
            <a href="#" class="fa fa-share-alt bds_more" data-cmd="more"></a>
        </div>
        <script>
            window._bd_share_config={
                "common":{"bdSnsKey":{},"bdText":"开源在线-Markdown-编辑器　| blog　","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
        </script>
    

    
</div>







    




    <div class="scroll" id="post-nav-button">
        
            <a href="/2019/01/11/firstblog/" title="上一篇: firstblog">
                <i class="fa fa-angle-left"></i>
            </a>
        

        <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>

        
            <a href="/2019/01/07/hello-hexo/" title="下一篇: hello hexo">
                <i class="fa fa-angle-right"></i>
            </a>
        
    </div>

    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2019/01/11/firstblog/">firstblog</a></li><li class="post-list-item"><a class="post-list-link" href="/2019/01/08/开源在线-Markdown-编辑器/">开源在线-Markdown-编辑器</a></li><li class="post-list-item"><a class="post-list-link" href="/2019/01/07/hello-hexo/">hello hexo</a></li><li class="post-list-item"><a class="post-list-link" href="/2019/01/07/hello-world/">Hello World</a></li></ul>




    <script>
        
    </script>
</div>
      <footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                <i class="fa fa-copyright"></i> 
                2019 yuefu
            </div>
            <div class="footer-right">
                <a href="http://hexo.io/" target="_blank" title="快速、简洁且高效的博客框架">Hexo</a>  Theme <a href="https://github.com/MOxFIVE/hexo-theme-yelee" target="_blank" title="简而不减 Hexo 双栏博客主题  v3.5">Yelee</a> by MOxFIVE <i class="fa fa-heart animated infinite pulse"></i>
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style="display:none">
                        <span id="site-visit" title="本站到访数"><i class="fa fa-user" aria-hidden="true"></i><span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>| </span>
                
                
                    <span id="busuanzi_container_page_pv" style="display:none">
                        <span id="page-visit" title="本页阅读量"><i class="fa fa-eye animated infinite pulse" aria-hidden="true"></i><span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
    </div>
</footer>
    </div>
    
<script data-main="/js/main.js" src="//cdn.bootcss.com/require.js/2.2.0/require.min.js"></script>

    <script>
        $(document).ready(function() {
            var iPad = window.navigator.userAgent.indexOf('iPad');
            if (iPad > -1 || $(".left-col").css("display") === "none") {
                var bgColorList = ["#9db3f4", "#414141", "#e5a859", "#f5dfc6", "#c084a0", "#847e72", "#cd8390", "#996731"];
                var bgColor = Math.ceil(Math.random() * (bgColorList.length - 1));
                $("body").css({"background-color": bgColorList[bgColor], "background-size": "cover"});
            }
            else {
                var backgroundnum = 5;
                var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
                $("body").css({"background": backgroundimg, "background-attachment": "fixed", "background-size": "cover"});
            }
        })
    </script>





<div class="scroll" id="scroll">
    <a href="#" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments" onclick="load$hide();" title="查看评论"><i class="fa fa-comments-o"></i></a>
    <a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
</div>
<script>
    // Open in New Window
    
        $("a[target=_blank]").removeAttr("target");
    
</script>

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
  </div>
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/miku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"log":false});</script></body>
</html>